search-box {
  min-height: $search-box-height;
  position: relative;
}

search-box[active] {
  @include apply-utility('stack', '500');
  background-color: var(--color-bg);

  .search-box__input {
    display: block;
  }
}

.search-box__inner {
  align-items: center;
  display: grid;
  height: 100%;
}

// Force items to overlap by putting them in the same column and row.
// This is how we position the magnifying glass icon over the search input.
.search-box__inner > * {
  grid-column: 1;
  grid-row: 1;
}

.search-box__btn {
  @extend %button;
  @include apply-utility('stack', '400');
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: get-size(700);

  > svg {
    fill: currentColor;
  }
}

.search-box__input {
  background: var(--color-bg-shade);
  border: 0;
  border-radius: px-to-rem(100px);
  display: none;
  font: inherit;
  margin: 0;
  padding: get-size(200) get-size(300) get-size(200) get-size(700);

  @include media-query('lg') {
    display: block;
    width: 100%;
  }

  &::placeholder {
    color: var(--color-secondary-text);
  }
}

.search-box__results {
  --flow-space: #{get-size(400)};
  @extend %stack;
  height: calc(100vh - #{$search-box-height});
  max-width: 100%;
  overflow-x: hidden;
  // Add some extra padding to the bottom so there's whitespace after the last
  // result on mobile.
  padding-bottom: get-size(1000);
  position: absolute;
  // top = search-box's height + top-nav's bottom padding + gap
  top: calc(#{$search-box-height} + #{nth(map-get($top-nav-padding, 'lg'), 1)} + #{get-size(400)});

  strong {
    color: var(--color-primary);
  }
}

.search-box__result-heading {
  color: var(--color-secondary-text);
}

.search-box__result-heading ~ .search-box__result-heading {
  border-top: 1px solid var(--color-hairline);
  padding-top: get-size(400);
}

.search-box__link {
  --overlay-background-color: var(--color-primary);
  @extend %overlay;
  align-items: center;
  display: inline-flex;
  text-decoration: none;
}

.search-box__link[aria-selected='true']::before {
  opacity: 0.1;
}

.search-box__title {
  color: var(--color-text);
}

.search-box__snippet {
  color: var(--color-secondary-text);
}

.search-box__thumbnail {
  margin-left: get-size(200);

  @include media-query('md') {
    margin-left: get-size(300);
  }
}
